/** @format */

var prev = document.getElementById("prev"); //左箭头
var next = document.getElementById("next"); //右箭头
var list = document.getElementById("list"); //总轮播ul元素
var items = document.getElementsByClassName("list-item");
var buttons = document.getElementById("buttons"); //所有小圆点
// var imgwidth = list.children[0].offsetWidth;   //获取图片的宽度
var span = document.getElementById("buttons").getElementsByTagName("span"); //每一个单独的小圆点
var index = 1; //设置为当前图片的下标，0为衔接图片

//1、下一张
var toNext = function () {
	// console.log(items);
	index++;
	if (index === items.length - 1) {
		//到达最后一张衔接图，设置跳转到真实图第一张,实现无缝轮播
		index = 1; //开始真实图的下标
	}
	moveElement(list, -560 * index, 20, 20); //图片移动
	spanchange();
};
//2、上一张
toPrev = function () {
	index--;
	if (index === 0) {
		//到达最开始的衔接图，设置跳转到最后一张真实图,实现无缝轮播
		index = items.length - 2; //最后真实图的下标
		console.log(index);
	}
	moveElement(list, -560 * index, 20, 20); //图片移动
	spanchange();
};

next.onclick = toNext;
prev.onclick = toPrev;

//4、小圆点点击跳到对应图
for (var i = 0; i < span.length; i++) {
	span[i].idx = i; //把小圆点的下标存储起来为idx,注意对象是span
	span[i].onclick = function () {
		index = this.idx + 1; //将小圆点下标转换为对应图片的index
		moveElement(list, -560 * index, 20, 20); //图片移动
		spanchange();
	};
}

//5、小圆点样式变化
function spanchange() {
	//所有小圆点样式清空
	for (var i = 0; i < span.length; i++) {
		span[i].className = "";
	}
	//活跃小圆点添加样式
	span[index - 1].className = "active"; //当前小圆点高亮
}

//3、移动函数
function moveElement(ele, x_final, y_final, interval) {
	//ele为元素对象

	var x_pos = ele.offsetLeft;
	var y_pos = ele.offsetTop;
	var dist = 0;
	if (ele.movement) {
		//防止悬停
		clearTimeout(ele.movement);
	}
	if (x_pos == x_final && y_pos == y_final) {
		//先判断是否需要移动
		return;
	}
	dist = Math.ceil(Math.abs(x_final - x_pos) / 10); //分10次移动完成
	x_pos = x_pos < x_final ? x_pos + dist : x_pos - dist;

	dist = Math.ceil(Math.abs(y_final - y_pos) / 10); //分10次移动完成
	y_pos = y_pos < y_final ? y_pos + dist : y_pos - dist;

	ele.style.left = x_pos + "px";
	ele.style.top = y_pos + "px";

	ele.movement = setTimeout(function () {
		//分10次移动，自调用10次
		moveElement(ele, x_final, y_final, interval);
	}, interval);
}

//6、定时器自动轮播
window.onload = function () {
	console.log("window的轮播器");
	play();
};
play = function () {
	timer = setInterval(function () {
		toNext();
	}, 3000);
};

//7、悬浮清空定时器
list.onmouseover = function () {
	clearInterval(timer);
	console.log("清除轮播定时器");
};
list.onmouseout = function () {
	play();
	console.log("轮播重新实现");
};
